<%--
  Created by IntelliJ IDEA.
  User: Honphie.$.Won
  Date: 2023/7/2
  Time: 12:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <script src="./js/vue.js"></script>
    <script src="./elementui/index.js"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
    <style scoped>
        .login-page{
            background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-title{
            font-size: 20px;
        }

        .box-card {
            width: 375px;
        }

        .login_title span{
            margin: 0 20px 0 20px;
            cursor: pointer;
        }
        .login_title span:hover{
            color: #333;
            font-weight: bolder;
        }
        .isActiveTitle{
            color: #333;
            font-weight: bolder;
        }
        .login_title{
            text-align: center;
            margin: 10px 20px 20px 20px;
            font-size: 18px;
            color: #666;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="login-page">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="login-title">🔐药品管理系统</span>
                </div>
                <div class="login-form">
                    <p class="login_title">
                        <span :class="isActiveIndex == 0 ? 'isActiveTitle' : ''" @click="accountLogin">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
                        <span :class="isActiveIndex == 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
                    </p>
                    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" v-if="isActive">
                        <el-form-item prop="account">
                            <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入用户名">
                                <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="pwd">
                            <el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="请输入密码">
                                <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <div style="display: flex;">
                                <el-input
                                        v-model="loginForm.code"
                                        auto-complete="off"
                                        placeholder="验证码"
                                        style="width: 63%;"
                                        @keyup.enter.native="handleLogin"
                                >
                                    <template slot="prepend">
                                        <i style="font-size:20px" class="el-icon-s-claim"></i>
                                    </template>
                                </el-input>
                                <div class="login-code" style="margin-left: 10px;">
                                    <img :src="codeUrl" @click="getCode" class="login-code-img" title="点击更新验证码" style="cursor: pointer;margin-top: 4px"/>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
                        </el-form-item>
                    </el-form>


                    <el-form v-else :model="loginForm2" :rules="loginRules2" ref="loginForm2" >
                        <el-form-item prop="phone">
                            <el-input type="text" v-model="loginForm2.phone" auto-complete="off" placeholder="请输入手机号码">
                                <template slot="prepend"><i style="font-size:20px" class="el-icon-mobile-phone"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="phoneCode">
                            <el-input type="text" v-model="loginForm2.phoneCode" auto-complete="off" placeholder="请输入验证码">
                                <template slot="prepend"><i style="font-size:20px" class="el-icon-message"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" @click="SendCode" >获取验证码</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
    </template>
</div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        loading: false,
        loginRules:{
            account: [
                { required: true, message: '请输入账户', trigger: 'blur' },
            ],
            pwd: [
                { required: true, message: '密码不能为空', trigger: 'blur'}
            ],
            code: [
                { required: true, message: '请输入验证码', trigger: 'blur'},
                {
                    validator: (rule, value, callback) => {
                        $.post("Admins_AccountsServlet?tag=Checkcode",{
                            code: value
                        },function (data) {
                            if(data){
                                 callback();
                            }else{
                                callback(new Error('验证码错误'));
                            }
                        },"json");
                    },
                    trigger: 'blur'
                }
            ]
        },
        loginRules2:{
            phone: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                {
                    validator: (rule, value, callback) => {
                        if (!value) {
                            return callback(new Error('请输入手机号'));
                        }
                        setTimeout(() => {
                            if (!Number.isInteger(+value)) {
                                callback(new Error('请输入数字值'));
                            } else {
                                if ((/^1[3456789]\d{9}$/.test(value))) {
                                    callback();
                                } else {
                                    callback(new Error('请输入正确的手机号'));
                                }
                            }
                        }, 100);
                    },
                    trigger: 'blur'
                },
                {
                    validator: (rule, value, callback) => {
                        $.post("Admins_AccountsServlet?tag=CheckPhone",{
                            phone: value
                        },function (data) {
                            if(data){
                                callback();
                            }else{
                                callback(new Error('该用户不存在'));
                            }
                        },"json");
                    },
                    trigger: 'blur'
                }

            ],
            phoneCode: [
                { required: true, message: '请输入手机验证码', trigger: 'blur'}
            ]
        },
        isActive: true, // 用于实现切换登录，作为判断
        isActiveIndex: 0,
        loginForm: {
            account: '',
            pwd: '',
            code: ''
        },
        loginForm2: {
            phone: '',
            phoneCode: ''
        },
        codeUrl: 'ImgCode'
    },
    methods:{
        handleLogin(){
            if(this.isActiveIndex == 0){
                this.$refs.loginForm.validate().then(()=>{
                    this.loading = true;
                    $.post("Admins_AccountsServlet?tag=Login",{
                        account: this.loginForm.account,
                        pwd: this.loginForm.pwd
                    },function (data) {
                        if(data){
                            window.location.href = "index.jsp";
                        }else{
                            this.$message({
                                message: "账号或密码有误！",
                                type: 'warning'
                            });
                        }
                    },"json");
                }).catch((error=>{
                    this.$message({
                        message: '输入信息有误！',
                        type: 'warning'
                    });
                }))
            }else{
                var that = this;
                this.$refs.loginForm2.validate().then(()=>{
                    this.loading = true;
                    $.post("Admins_AccountsServlet?tag=LoginByPhone",{
                        code: that.loginForm2.phoneCode
                    },function (data) {
                        if(data){
                            window.location.href = "index.jsp";
                        }else{
                            that.$message({
                                message: "验证码有误！",
                                type: 'warning'
                            });
                            that.loading = false;
                        }
                    },"json");
                }).catch((error=>{
                    this.$message({
                        message: '输入信息有误！',
                        type: 'warning'
                    });
                }))
            }
        },

        accountLogin() { // 账号登录
            this.isActive = true;
            this.isActiveIndex = 0
        },
        smsLogin() { // 短信登录
            this.isActive = false;
            this.isActiveIndex = 1
        },
        getCode() { //点击的时候就图片就请求 图片就换了
            this.codeUrl = "ImgCode?"+Math.random();
        },
        SendCode() {
            this.$refs.loginForm2.validateField('phone', valid => {
                if (valid=="") {
                    // 手机号验证通过，执行发送验证码的逻辑
                    $.get("Admins_AccountsServlet?tag=SendCode", {
                        phone: this.loginForm2.phone
                    }, (data) => {
                        if (data) {
                            this.$message({
                                message: "发送成功！",
                                type: 'success'
                            });
                            //倒计时5分钟
                            var time =5*60;
                            var timer = setInterval(function () {
                                if (time > 0) {
                                    time--;
                                    $(".el-button--mini").text(time + "秒后重新发送");
                                    $(".el-button--mini").attr("disabled", true);
                                } else {
                                    $(".el-button--mini").text("获取验证码");
                                    $(".el-button--mini").attr("disabled", false);
                                    clearInterval(timer);
                                }
                            }, 1000);
                        } else {
                            this.$message({
                                message: "发送失败！",
                                type: 'warning'
                            });
                        }
                    }, "json");
                } else {
                    // 手机号验证不通过
                    this.$message({
                        message: '手机号码有误！',
                        type: 'warning'
                    });
                }
            });
        },
        CheckPhone(){
            $.post("Admins_AccountsServlet?tag=CheckPhone",{
                phone: this.loginForm2.phone
            },function (data) {
                if(data){
                    this.$message({
                        message: "该用户不存在！",
                        type: 'warning'
                    });
                }
            },"json");
        }

    }
});
</script>
</html>
